<template>
  <uni-popup ref="remarkPopup" type="bottom" background-color="reba(240, 242, 248,1)"
             border-radius="50rpx 50rpx 50rpx 50rpx" style="height: 80%">
    <view class="show-popup">
      <view class="popup-title">
        <view class="label">请选择乘车人</view>

        <uni-icons type="closeempty" style="position: absolute;right: 20rpx;top: 20rpx" :size="20"
                   @tap="closePopup"></uni-icons>
      </view>

      <view class="container">
        <uni-forms label-position="top" label-width="200">
          <uni-forms-item label="请填写您的特殊要求">
            <uni-easyinput type="textarea" placeholder="您的特殊需求，我们将会更具实际清空协调，如无法满足，请您谅解"
                           maxlength="200" v-model="remark"></uni-easyinput>
          </uni-forms-item>
        </uni-forms>
        <button type="primary" style="position: absolute;bottom: 40rpx;left: 20rpx;right: 20rpx" @click="save">保存备注
        </button>
      </view>
    </view>
  </uni-popup>
</template>

<script>
export default {
  data() {
    return {
      remark: ''
    };
  }, methods: {
    save() {
      this.$emit('update:remark', this.remark)
      this.closePopup()
    },
    open() {
      this.$refs.remarkPopup.open()
    },
    closePopup() {
      this.$refs.remarkPopup.close()
    }
  }
}
</script>

<style lang="scss">
.show-popup {
  position: relative;
  border-radius: 20rpx 20rpx 0 0;
  background-color: #f0f2f8;
  height: 80vh;

  //.flex-item {
  //  //flex: 1;
  //  height: 100vh;
  //}

  .popup-title {
    height: 8vh;
    text-align: center;
    border-radius: 20rpx 20rpx 0 0;
    background: linear-gradient(to bottom, #d9f2fc, #fff);
  }
}

.container {
  background: #FFFFFF;
  padding: 20rpx;
}
</style>
